// 立即执行函数表达式
(()=>{

    function single( selector ) {
        return document.querySelector( selector );
    }

    function bindClick( who , listener ) {
        who.addEventListener( 'click' , listener , false );
    }

    const input = single( 'input[type=text]' );
    const result = single( '.result' );

    const handler = {
        handleEvent(e) {
            let $http = e.target ;
            // XMLHttpReqeust.prototype.DONE 表示响应全部结束
            if( $http.readyState === $http.DONE ) {
                console.log( $http );
                // 通过 $http.response 获取响应正文
                result.innerHTML = $http.response ;
            }
        }
    }

    const firstBtn = single( '.first' );
    bindClick( firstBtn , {
        handleEvent() {
            // 1、创建用于发送请求接受响应的实例
            let $http = new XMLHttpRequest();
            // 输出 $http 的 readyState 属性值
            // console.log( $http.readyState );
            // 2、监听 $http 的 readyState 改变事件
            $http.addEventListener( 'readystatechange' , handler , false );
            // 3、打开连接
            $http.open( 'get' , `/hello?nickname=${input.value}` );
            // 4、发送请求
            $http.send();
        }
    });

    const secondBtn = single( '.second' );
    bindClick( secondBtn , {
        handleEvent(){
            // 1、创建收发器(发送请求、接收响应)
            let $http = new XMLHttpRequest();
            // 2、绑定 readystatechange 事件监听器
            $http.addEventListener( 'readystatechange' , handler , false );
            // 3、打开连接
            $http.open( 'post' , '/hello' );
            // 4、若请求方式为 POST 则需要显式设置 请求头 中的 content-type 字段
            $http.setRequestHeader( 'content-type' , 'application/x-www-form-urlencoded' );
            // 预备向服务端发送的数据
            let body = `nickname=${input.value}&gender=male&hobby=eat&hobby=eatji`;
            // 5、发送请求
            $http.send( body );
        }
    });

    const thirdBtn = single( '.third' );
    bindClick( thirdBtn , {
        handleEvent(){
            // 可以用 PUT 方式发送请求吗？
            // 1、创建收发器(发送请求、接收响应)
            let $http = new XMLHttpRequest();
            // 2、绑定 readystatechange 事件监听器
            $http.addEventListener( 'readystatechange' , handler , false );
            // 3、打开连接
            $http.open( 'put' , '/hello' );
            // 4、若请求方式为 PUT 则需要显式设置 请求头 中的 content-type 字段
            $http.setRequestHeader( 'content-type' , 'application/x-www-form-urlencoded' );
            // 预备向服务端发送的数据
            let body = `nickname=${input.value}&gender=male&hobby=eat&hobby=eatji`;
            // 5、发送请求
            $http.send( body );
        }
    });

    const fourthBtn = single( '.fourth' );
    bindClick( fourthBtn , {
        handleEvent(){
            // 可以用 DELETE 方式发送请求吗？
            // 1、创建收发器(发送请求、接收响应)
            let $http = new XMLHttpRequest();
            // 2、绑定 readystatechange 事件监听器
            $http.addEventListener( 'readystatechange' , handler , false );
            // 预备向服务端发送的数据
            let query = `nickname=${input.value}&gender=male&hobby=eat&hobby=eatji`;
            // 3、打开连接
            $http.open( 'delete' , `/hello?${query}` );
            // 4、发送请求
            $http.send();
        }
    } );

})();